<template>
  <div class="container">
    <van-tabs
      v-model="active"
      sticky
      title-active-colo="#3ACE8A"
      @change="tabsChange"
      title-inactive-color="#003333"
      color="#3ACE8A"
    >
      <van-tab title="我的商品"></van-tab>
      <van-tab title="待上架"></van-tab>
      <van-tab title="已上架"></van-tab>
      <van-tab title="待收款"></van-tab>
    </van-tabs>
    <div class="content">
      <van-pull-refresh
        class="conPull"
        v-model="isLoading"
        @refresh="onRefresh"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell
            class="conList"
            v-for="(item, index) in list"
            :key="index"
            @click.stop="navDetails(item)"
          >
            <img class="image" :src="item.list_img" alt="" />
            <div class="textCon">
              <div class="name">{{ item.name }}</div>
              <div class="nanumberme">商品编号：{{ item.goods_num }}</div>
              <div class="mouny">￥{{ item.price }}</div>
            </div>
            <van-button
              type="default"
              v-if="item.status == 0 && type != 3"
              round
              class="button"
              @click.stop="upperFn(item)"
              >委托代卖</van-button
            >

            <!-- <van-button
              type="default"
              v-else-if="item.status == 1 && type != 3"
              round
              class="button"
              @click.stop="removeGoodsFn(item)"
              >取消审核</van-button
            > -->

            <!-- <van-button
              type="default"
              v-else-if="item.status == 2 && type != 3"
              round
              class="button"
              @click.stop="upperFn(item)"
              >取消委托</van-button
            > -->
            <van-button
              type="default"
              v-else-if="type == 3"
              round
              class="button"
              @click.stop="upperFn(item)"
              >确认收款</van-button
            >
            <!-- <img
              class="icon"
              src="../../assets/icon7.png"
              alt=""
              @click.stop="removeFn(item)"
            /> -->
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>
    <van-popup
      v-model="show"
      v-if="show"
      round
      position="bottom"
    >
      <div class="Poptitle">{{ item.goods.name }}</div>
      <div class="PopContent">
        商品编号：<span>{{ this.item.goods_num }}</span>
      </div>
      <div class="PopContent">
        售出时间：<span>{{ this.item.create_date }}</span>
      </div>
      <div class="PopContent">
        购买者：<span>{{ this.item.goods.username }}</span>
      </div>
      <div class="PopContent">
        售出价格：<span
          style="font-size: 18px; color: #d20000; font-weight: 700"
        >
          ￥{{ this.item.goods.price }}</span
        >
      </div>
      <div class="PopContent">
        收益金额：<span
          style="font-size: 18px; color: #28a800; font-weight: 700"
        >
          ￥{{ this.item.goods.fy_price }}</span
        >
      </div>
      <div class="PopContent">
        凭证图片：
        <img :src="item.pingzheng" alt="">
      </div>
      <div class="PopButton" @click="popOnClick">确认收款</div>
    </van-popup>
  </div>
</template>

<script>
import {
  getMyGoodsList,
  imgUrl,
  delGoods,
  cancelGoods,
  getMyDskList,
  getMyDskQuer,
  getConfig,
  getGoodInfo,
} from "../../api/api";
export default {
  name: "snapUp",
  data() {
    return {
      active: 0,
      type: 0,
      list: [],
      isLoading: false,
      loading: false,
      finished: false,
      page: 1,
      pagesize: 5,
      total: null,
      show: false,
      item: {},
      bool: true,
    };
  },
  methods: {
    getConfigInfo() {
      getConfig().then((res) => {
        const usedZfbl = JSON.parse(localStorage.getItem("config")).zfbl;
        const newZfbl = res.data[0].zfbl;
        if (usedZfbl != newZfbl) {
          if (this.list.length == 0 && this.bool) return this.getConfigInfo()
          this.list.map((item, index) => {
            if (Number(item.fy_price) == 0) return;
            let newPrice = ((item.price - item.fy_price) * (1 + newZfbl)).toFixed(2);
            let fyPrice = ((item.price - item.fy_price) * newZfbl).toFixed(2);
            this.list[index].price = newPrice;
            let data = {
              user_id: localStorage.getItem('userId'),
              goods_id: item.id,
              price: newPrice,
              fy_price: fyPrice,
            }
            getGoodInfo(data)
            console.log("变化后的价格", newPrice);
          });
          setTimeout(() => {
            localStorage.setItem("config", JSON.stringify(res.data[0]));
          });
        }
        // console.log("商品列表-获取配置信息接口", usedZfbl, res.data[0].zfbl);
      });
    },
    popOnClick() {
      const data = {
        user_id: localStorage.getItem("userId"),
        order_id: this.item.id,
      };
      getMyDskQuer(data).then((res) => {
        this.$toast.success("已确认收款");
        console.log("确认收款---", res);
        this.tabsChange(this.type);
      });
      this.show = false;
    },
    tabsChange(e) {
      this.type = e;
      this.finished = false;
      this.loading = false;
      this.isLoading = false;
      this.list = [];
      this.page = 1;
      this.total = null;
      this.getGoodsList();
    },
    onRefresh() {
      this.tabsChange(this.type);
      this.isLoading = false;
    },
    onLoad() {
      this.loading = true;
      if (this.total == null)
        return setTimeout(() => {
          this.onLoad();
        }, 1000);
      if (this.list.length >= this.total) {
        this.finished = true;
        this.loading = false;
      } else {
        this.page = this.page + 1;
        this.getGoodsList();
        this.loading = false;
      }
    },
    upperFn(item) {
      let data = {
        goods_id: item.id,
      };
      if (this.type == 3) {
        console.log("item---", item);
        item.pingzheng = imgUrl + item.pingzheng
        this.item = item;
        this.show = true;
        return;
      }
      this.$router.push({
        path: `/goods`,
        query: data,
      });
    },
    navDetails(item) {
      if (this.type == 3) return this.upperFn(item);
      let data = {
        goods_id: item.id,
      };
      this.$router.push({
        path: `/upper`,
        query: {
          goods_id: item.id,
        },
      });
    },
    getGoodsList() {
      if (this.type == 3) {
        const myData = {
          user_id: localStorage.getItem("userId"),
          page: this.page,
          pagesize: this.pagesize,
        };
        getMyDskList(myData).then((res) => {
          this.$toast.clear()
          console.log("待收款列表接口---", res.data);
          this.total = res.data.total;
          res.data.rows.forEach((item) => {
            item.list_img = imgUrl + item.goods.list_img;
            item.name = item.goods.name;
            item.goods_num = item.goods.goods_num;
            let date = new Date(item.create_date * 1000);
            let dateFullYear = date.getFullYear(); //年
            let dateMonth = date.getMonth() + 1; //月
            let dateDate = date.getDate(); //天
            let dateHour = date.getHours(); //小时
            let dateMinute = date.getMinutes(); //分
            item.create_date = `${dateFullYear}年${dateMonth}月${dateDate}日 ${dateHour}:${dateMinute >= 10 ? dateMinute : `0${dateMinute}`}`;
          });
          this.isLoading = false;
          this.list = this.list.concat(res.data.rows);
          this.bool = false
        });
      } else {
        const data = {
          user_id: localStorage.getItem("userId"),
          status: this.type,
          page: this.page,
          pagesize: this.pagesize,
        };
        getMyGoodsList(data).then((res) => {
          this.$toast.clear()
          console.log("订单列表接口---", res.data);
          this.total = res.data.total;
          res.data.rows.forEach((item) => {
            item.list_img = imgUrl + item.list_img;
          });
          this.isLoading = false;
          this.list = this.list.concat(res.data.rows);
          this.bool = false
        });
      }
    },
    removeFn(item) {
      this.$dialog
        .confirm({
          title: "",
          message: "是否删除该商品？？？",
        })
        .then(() => {
          const data = {
            user_id: localStorage.getItem("userId"),
            goods_id: item.id,
          };
          delGoods(data).then((res) => {
            console.log("删除商品---", res);
            this.tabsChange(this.type);
          });
        })
        .catch(() => {
          console.log("不删除商品");
        });
    },
    removeGoodsFn(item) {
      this.$dialog
        .confirm({
          title: "",
          message: "是否取消审核",
        })
        .then(() => {
          const data = {
            user_id: localStorage.getItem("userId"),
            goods_id: item.id,
            fy_price: item.fy_price,
            price: (
              item.price /
              (1 + JSON.parse(localStorage.getItem("config")).zfbl)
            ).toFixed(2),
          };
          cancelGoods(data).then((res) => {
            console.log("取消审核---", res);
            this.tabsChange(this.type);
          });
        })
        .catch(() => {
          // on cancel
        });
    },
  },
  mounted() {
    this.getGoodsList();
    this.getConfigInfo();
  },
};
</script>

<style lang="less" scoped>
.container {
  .content {
    width: 100%;
    background-color: #f1f1f1;
    min-height: calc(100vh - 44px);

    .conPull {
      min-height: calc(100vh - 44px);
    }

    .conList {
      width: 94%;
      height: 120px;
      margin-left: 3%;
      margin-top: 10px;

      .van-cell__value {
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-sizing: border-box;

        .image {
          width: 100px;
          height: 100px;
        }

        .textCon {
          width: calc(100% - 100px);
          height: 100px;
          padding-left: 13px;
          box-sizing: border-box;
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;

          .name {
            margin-top: 13px;
            width: 100%;
            font-size: 1.2em;
            color: #333333;
            overflow: hidden; /*超出部分隐藏*/
            white-space: nowrap; /*不换行*/
            text-overflow: ellipsis; /*超出部分文字以...显示*/
          }

          .nanumberme {
            font-size: 0.5em;
            margin-top: -15px;
            color: #999999;
          }

          .mouny {
            font-size: 1.5em;
            color: #dd0000;
          }
        }
        .button {
          height: 30px;
          color: #3ace8a;
          font-size: 0.8em;
          border: 1px solid #3ace8a;
          position: absolute;
          bottom: 0px;
          right: 5px;
        }

        .icon {
          width: 10px;
          height: 10px;
          position: absolute;
          top: 0;
          right: 0px;
        }
      }
    }
  }
  .Poptitle {
    color: #333333;
    font-size: 20px;
    margin: 20px 20px;
    position: relative;
  }
  .PopContent {
    margin: 10px 20px;
    color: #999999;

    span {
      color: #333333;
    }

    img {
      width: 200px;
      height: 200px;
      display: block;
      margin: 0 auto;
    }
  }
  .PopButton {
    width: 100%;
    height: 50px;
    color: #fff;
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 50px;
    text-align: center;
    background-color: #444444;
    position: absolute;
    // bottom: 0;
  }
}
</style>